<template>
  <div>
    <!-- 搜索框 -->
    <a-card :bordered="false" class="search-box">
      <h2 class="text-lg">搜索列表（文章）</h2>
      <div class="text-center mt-4">
        <a-input-search
          :style="{ width: '320px' }"
          placeholder="请输入关键字"
          size="large"
          search-button
        />
      </div>
    </a-card>

    <!-- 文章部分 start -->
    <div class="tab1 mt-3">
      <a-card :bordered="false">
        <!-- 分类 -->
        <div class="p-5 radius-10">
          <div class="flex items-start classification justify-between mt-2.5">
            <a-space direction="vertical" :style="{ width: '100%' }" size="large" v-if="loading">
              <a-skeleton-line :rows="1" />
            </a-space>
            <template v-else>
              <div class="label flex-none">分类: </div>
              <div class="flex-grow">
                <a-space wrap size="small" :class="!isCollapse ? 'height-limited' : ''">
                  <a-tag
                    size="large"
                    v-for="(item, index) in categoryListData"
                    :key="index"
                    @click="selectedHandle(index)"
                    :class="categoryIndex != index ? 'noSelected' : ''"
                    >{{ item.name }}</a-tag
                  >
                </a-space>
              </div>
              <div
                class="collapse-btn flex items-center justify-end flex-none primary-6 cursor-pointer"
                @click="collapseHandle"
                >{{ isCollapse ? '收起' : '展开' }}
                <icon-up class="ml-1" v-if="isCollapse" /><icon-down class="ml-1" v-else
              /></div>
            </template>
          </div>
          <div class="flex items-start justify-between classification mt-2.5">
            <div class="label flex-none">作者:</div>
            <div class="flex-grow">
              <a-input-tag
                :default-value="['小马哥', '啊俊', 'Jack', 'Roy']"
                placeholder="请输入"
                :style="{ width: '380px' }"
                :max-tag-count="3"
                size="large"
                allow-clear
              />
            </div>
          </div>
          <div class="flex items-start justify-between classification mt-5">
            <div class="label flex-none">排序:</div>
            <div class="flex-grow mt-1">
              <a-radio-group default-value="1">
                <a-radio value="1">最新发表</a-radio>
                <a-radio value="2">最多收藏</a-radio>
                <a-radio value="3">最多阅读</a-radio>
              </a-radio-group>
            </div>
          </div>
        </div>
      </a-card>

      <!-- 文章列表 -->
      <a-card :bordered="false" class="mt-3">
        <ul class="article-list">
          <li
            class="flex items-start justify-between"
            v-for="item in articleListData"
            :key="item.id"
          >
            <div>
              <a-typography>
                <a-typography-title :heading="5">{{ item.title }}</a-typography-title>
                <a-space class="mb-4">
                  <a-tag v-for="(tag, i) in item.tags" :key="i">{{ tag }}</a-tag>
                </a-space>
                <a-typography-paragraph class="c-gray">
                  {{ item.summary }}
                </a-typography-paragraph>
              </a-typography>
              <div class="text-xs">
                <a-avatar :size="24">
                  <img alt="avatar" :src="item.avatar" />
                </a-avatar>
                <span class="ml-1 mr-1">{{ item.author }}</span
                >发表于 <span>{{ item.date }}</span>
              </div>
              <div class="mt-4 text-gray-400">
                <span
                  ><icon-star class="mr-1" /><b class="text-xs">{{ item.collection }}</b></span
                >
                <a-divider direction="vertical" />
                <span
                  ><icon-thumb-up class="mr-1" /><b class="text-xs">{{ item.like }}</b></span
                >
                <a-divider direction="vertical" />
                <span
                  ><icon-message class="mr-1" /><b class="text-xs">{{ item.comment }}</b></span
                >
              </div>
            </div>
            <div class="thumb"><a-image width="100%" :src="item.cover" /></div>
          </li>
        </ul>
      </a-card>

      <!-- 加载更多 -->
      <a-card :bordered="false" class="text-center mt-3">
        <a-button :loading="loadingMore" @click="loadMore">加载更多</a-button>
      </a-card>
    </div>
    <!-- 文章部分 end -->
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { categoryList } from '@/api/comtemp/category';
  import { articleList } from '@/api/comtemp/article';

  const loading = ref(true);
  const categoryIndex = ref(-1);
  const isCollapse = ref(false);
  const categoryListData = ref();
  const articleListData = ref();
  const pageSize = ref(5);
  const loadingMore = ref(true);

  //获取分类列表
  async function getCategoryList() {
    const res = await categoryList();
    categoryListData.value = res && res.list ? res.list : [];
    loading.value = false;
  }

  //分类选中
  function selectedHandle(index) {
    categoryIndex.value = index;
  }

  //是否展开
  function collapseHandle() {
    isCollapse.value = !isCollapse.value;
  }

  //获取文章列表
  async function getArticleList() {
    const res = await articleList({ pageSize: pageSize.value });
    articleListData.value = res && res.list ? res.list : [];
    loadingMore.value = false;
  }

  //加载更多
  function loadMore() {
    loadingMore.value = true;
    pageSize.value = pageSize.value + 5;
    getArticleList();
  }

  onMounted(() => {
    //获取分类
    getCategoryList();
    //获取文章
    getArticleList();
  });
</script>

<style lang="less" scoped>
  .radius-10 {
    border-radius: 10px;
    overflow: hidden;
  }

  .c-gray {
    color: var(--color-text-3);
  }

  //分类
  .classification {
    .label,
    .collapse-btn {
      height: 32px;
      font-size: 14px;
      line-height: 30px;
    }
    .label {
      width: 60px;
    }
    .collapse-btn {
      width: 60px;
    }
    .height-limited {
      height: 40px;
      overflow: hidden;
    }
    .arco-tag {
      cursor: pointer;
    }
    .arco-tag.noSelected {
      background-color: transparent;
    }
  }

  //文章
  .tab1 {
    // 文章列表
    .article-list {
      li {
        padding: 20px 0;
        border-bottom: 1px solid var(--color-border);
        .arco-typography {
          max-width: 800px;
        }
        .thumb {
          max-width: 250px;
          margin-left: 40px;
          .arco-image {
            width: 100%;
          }
        }
      }
    }

    @media (max-width: 767px) {
      .article-list {
        li {
          flex-wrap: wrap-reverse;
          .thumb {
            margin: 0 auto;
          }
        }
      }
    }
  }
</style>
